<template>
    <div class="app-container personal-info">
        <div class="left-info">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>个人信息</span>
                </div>
                <div>
                    <div class="text-center">
                        <userAvatar :user="user"/>
                    </div>
                    <ul class="list-group list-group-striped">
                        <li class="list-group-item">
                            <svg-icon icon-class="user"/>
                            用户名称
                            <div class="pull-right">{{ user.userName }}</div>
                        </li>
                        <li class="list-group-item">
                            <svg-icon icon-class="phone"/>
                            手机号码
                            <div class="pull-right">{{ user.phonenumber }}</div>
                        </li>
                        <li class="list-group-item">
                            <svg-icon icon-class="email"/>
                            用户邮箱
                            <div class="pull-right">{{ user.email }}</div>
                        </li>
                        <li class="list-group-item">
                            <svg-icon icon-class="tree"/>
                            所属部门
                            <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}
                            </div>
                        </li>
                        <li class="list-group-item">
                            <svg-icon icon-class="peoples"/>
                            所属角色
                            <div class="pull-right">{{ roleGroup }}</div>
                        </li>
                        <li class="list-group-item">
                            <svg-icon icon-class="date"/>
                            创建日期
                            <div class="pull-right">{{ user.createTime }}</div>
                        </li>
                    </ul>
                </div>
            </el-card>
        </div>
        <div class="right-data">
            <el-card>
                <div slot="header" class="clearfix">
                    <span>基本资料</span>
                </div>
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="基本资料" name="userinfo">
                        <userInfo :user="user"/>
                    </el-tab-pane>
                    <el-tab-pane label="修改密码" name="resetPwd">
                        <resetPwd :user="user"/>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
    </div>
</template>

<script>
    import userAvatar from './userAvatar'
    import userInfo from './userInfo'
    import resetPwd from './resetPwd'
    import { getUserProfile } from '@/api/system/user'

    export default {
        name: 'Profile',
        components: { userAvatar, userInfo, resetPwd },
        data() {
            return {
                user: {},
                roleGroup: {},
                postGroup: {},
                activeTab: 'userinfo'
            }
        },
        created() {
            this.getUser()
        },
        methods: {
            getUser() {
                getUserProfile().then(response => {
                    this.user = response.data
                    this.roleGroup = response.roleGroup
                    this.postGroup = response.postGroup
                })
            }
        }
    }
</script>
<style lang="scss">
    .personal-info{
        display: flex;
        flex-direction: row;
        .left-info{
            width: 35%;
            margin-right: 0.1875rem;
        }
        .right-data{
            width: 65%;
        }
        .el-card{
            height: 100%;
        }
    }
</style>
